後端幼幼班Day10 HTML篇 HTML基本介紹及常用語法 Part1

2022 iThome 鐵人賽

DAY 10

Modern Web

Willisの後端幼幼班系列第 10 篇

14th鐵人賽

Willis

團隊imac_Big3

2022-09-25 07:30:35

793 瀏覽

分享至

雖然我們是後端幼幼班，但是前端的基本知識也必須知道，不然會無法跟前端的人配合以及溝通喔 ! ｡･ﾟ･(ﾉ∀`)･ﾟ･｡

HTML是甚麼?

HTML是一種基礎技術，被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面，可做為Flask網頁框架中前端設計模板工具。

專案創建

先創建一個專案資料夾吧

$ mkdir html_project

移動至專案資料夾

$ cd html_project

開啟VS Code

$ code .

新增一個檔案，寫下你的網頁吧 !

網頁開發的好用工具 - Live Server

在你的VS Code的延伸模組中搜尋 : Live Server ，點擊 安裝
網頁完成開發後，點擊 Go Live
就可以看到你建置的網頁囉 !

HTML基本語法教學

Tag(標籤) `<> </>`

HTML的語法是由一堆標籤結構所組成，然後把內容放入起始標籤與結束標籤中。

起始標籤 : <>
結束標籤 : </>
這是一個基本的HTML index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello World! 
</body>
</html>

<!DOCTYPE html> 宣告使用 HTML5 語法標準的文件
<html>  標籤是 HTML 文件的根元素
<head>  說明關於該網頁的元資訊
<title> 網頁的名稱
<body>  顯示在網頁的內容

title(網頁名稱) `<title> </title>`

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
</body>
</html>

執行結果

註解標籤 ``

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>p標籤段落</p>
</body>
</html>

執行效果

p標籤(段落) `<p> </p>`

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>p標籤段落</p>
</body>
</html>

執行結果

br標籤(換行) `<br>`

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>你好我是第一行<br>你好我是第二行<br>你好我是第三行<br></p>
</body>
</html>

執行結果

h標籤(標題) `<h1> - <h6> </h1> - </h6>`

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>你好我是h1</h1>
    <h2>你好我是h2</h2>
    <h3>你好我是h3</h3>
    <h4>你好我是h4</h4>
    <h5>你好我是h5</h5>
    <h6>你好我是h6</h6>
</body>
</html>

執行結果

img標籤(圖片) `<img>`

img標籤設定屬性:

src(位址)
width(寬度)
heigh(高度)
alt(圖片無法顯示時的替代文字)
title(滑鼠在圖片上時，會自動顯示這段文字)

(以上的設定屬性除了src是必要，其他都可以自行選擇是否使用)

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="https://ithelp.ithome.com.tw/storage/image/fbpic.jpg" with="600" heigh="315" alt="顯示失敗" title="Hi 你好啊!">
</body>
</html>

圖片執行成功結果
圖片執行失敗結果

a標籤(超連結) `<a> </a>`

網頁 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://ithelp.ithome.com.tw/">iT邦幫忙</a>
</body>
</html>